<template>
  <div class="search-container">
    <h1>主机端口扫描</h1>
    <el-form :model="queryForm">
      <el-form-item>
        <el-input v-model="queryForm.host" placeholder="输入IP地址一键扫描" />
      </el-form-item>
      <el-button
        class="w-full mt-4"
        size="default"
        type="primary"
        :loading="loading"
        @click="onQuery()"
      >开始扫描</el-button>
    </el-form>
    <el-divider />
    <div v-show="resultVisiable">
      <h3>{{ queryForm.host }}端口扫描结果</h3>
      <el-table highlight-current-row :data="responseData" style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="port" label="端口" width="180" />
        <el-table-column prop="_shodan.module" label="服务" width="180" />

        <el-table-column label="版本信息">
          <template #default="scope">
            {{
              typeof scope.row.product == "undefined"
                ? ""
                : scope.row.product + " " + scope.row.version
            }}
          </template>
        </el-table-column>
        <el-table-column prop="timestamp" label="更新时间" width="250" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { searchIP } from '@/api/search/index'

export default {
  name: 'ScanHost',
  data: function() {
    return {
      loading: false,
      resultVisiable: false,
      tableData: [],
      queryForm: {
        'host': '219.130.135.190'
      },
      responseData: []
    }
  },
  methods: {
    onQuery: function() {
      this.loading = true
      this.resultVisiable = false
      searchIP(this.queryForm.host).then(resp => {
        this.responseData = resp.data.data
        this.resultVisiable = true
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
h1,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}
.search-container {
  margin:30px;
}
.result-container {
  padding: 5px 20px 10px;
  background-color: white;
}
</style>
